<template>
	<div id="homePage">
		<a-space direction="vertical" size="large" fill>
			<!-- 额外的筛选条件区域 -->
			<a-card :bordered="false" class="filter-card">
				<a-space size="middle" wrap>
					<!-- 姓名筛选 -->
					<a-input v-model="nameFilter" placeholder="输入姓名搜索" style="width: 200px" allow-clear />

					<!-- 薪资筛选 -->
					<a-select v-model="salaryFilter" placeholder="选择薪资范围" style="width: 200px" allow-clear>
						<a-select-option value="20000">> 20000</a-select-option>
						<a-select-option value="30000">> 30000</a-select-option>
					</a-select>

					<!-- 地址筛选 -->
					<a-select v-model="addressFilter" placeholder="选择城市" style="width: 200px" allow-clear>
						<a-select-option value="London">London</a-select-option>
						<a-select-option value="Paris">Paris</a-select-option>
					</a-select>

					<!-- 重置按钮 -->
					<a-button @click="resetFilters">重置筛选</a-button>
					<a-switch v-model="alignLeft" />
					<span>启用筛选</span>
				</a-space>
			</a-card>

			<!-- 表格 -->
			<a-table
			  :ref="tableRef"
			  :columns="columns"
			  :data="dataList"
			  :pagination="{
			            showTotal: true,
			            pageSize: searchParams.pageSize,
			            current: searchParams.current,
			            total,
			        }"
			  @page-change="onPageChange"
			>
			<template #status="{ record }">
				<div v-if="record.status == 2">
					<a-space size="large">
					    <icon-check-circle :style="{fontSize:'32px'}" />
					</a-space>
				</div>
			</template>
			<template #createTime="{ record }">
			  {{record.createTime.slice(0,10)}}
			</template>
			</a-table>
		</a-space>
	</div>
</template>

<script setup lang="ts">
	import { IconPlus, IconCheckCircle } from '@arco-design/web-vue/es/icon';
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue';
	import {
		JudgeInfo,
		Question,
		QuestionControllerService,
		QuestionSubmitQueryRequest, QuestionSubmitVO
	} from "../generated";
import { message } from 'ant-design-vue';
	const alignLeft = ref(false);
	const dataList = ref<QuestionSubmitVO[]>([]);
	const total = ref(0);
	const tableRef = ref();
	// 额外筛选条件
	const nameFilter = ref('');
	const salaryFilter = ref('');
	const addressFilter = ref('');
	const searchParams = ref<QuestionSubmitQueryRequest>({
		userId: undefined,
		questionId: undefined,
		language: undefined,
		pageSize: 10,
		current: 1
	});
	
	// 表格列定义
	const columns = [
		{
		  title: "判题状态",
		  dataIndex: "status",
		  slotName: "status",
		  sortable: {
		  	sortDirections: ['ascend', 'descend']
		  }
		},
		{
		  title: "编程语言",
		  dataIndex: "language",
		  sortable: {
		  	sortDirections: ['ascend', 'descend']
		  }
		},

		{
		  title: "题目 id",
		  dataIndex: "questionId",
		  sortable: {
		  	sortDirections: ['ascend', 'descend']
		  }
		},
		{
		  title: "提交者 id",
		  dataIndex: "userId",
		  sortable: {
		  	sortDirections: ['ascend', 'descend']
		  }
		},
		{
		  title: "创建时间",
		  slotName: "createTime",
		  dataIndex: "createTime",
		  sortable: {
		  	sortDirections: ['ascend', 'descend']
		  }
		},
	// 	{
	// 	title: 'Name',
	// 	dataIndex: 'name',
		
	// },
	// {
	// 	title: 'Salary',
	// 	dataIndex: 'salary',
	// 	sortable: {
	// 		sortDirections: ['ascend']
	// 	},
	// 	filterable: {
	// 		filters: [{
	// 			text: '> 20000',
	// 			value: '20000',
	// 		}, {
	// 			text: '> 30000',
	// 			value: '30000',
	// 		}],
	// 		filter: (value, record) => record.salary > value,
	// 		multiple: true
	// 	}
	// },
	// {
	// 	title: 'Address',
	// 	dataIndex: 'address',
	// 	filterable: {
	// 		filters: [{
	// 			text: 'London',
	// 			value: 'London',
	// 		}, {
	// 			text: 'Paris',
	// 			value: 'Paris',
	// 		}],
	// 		filter: (value, row) => row.address.includes(value),
	// 	}
	// },
	// {
	// 	title: 'Email',
	// 	dataIndex: 'email',
	// },
	];

	// 原始数据
	const data = reactive([{
		key: '1',
		name: 'Jane Doe',
		salary: 23000,
		address: '32 Park Road, London',
		email: 'jane.doe@example.com'
	}, {
		key: '2',
		name: 'Alisa Ross',
		salary: 25000,
		address: '35 Park Road, London',
		email: 'alisa.ross@example.com'
	}, {
		key: '3',
		name: 'Kevin Sandra',
		salary: 22000,
		address: '31 Park Road, London',
		email: 'kevin.sandra@example.com'
	}, {
		key: '4',
		name: 'Ed Hellen',
		salary: 17000,
		address: '42 Park Road, London',
		email: 'ed.hellen@example.com'
	}, {
		key: '5',
		name: 'William Smith',
		salary: 27000,
		address: '62 Park Road, London',
		email: 'william.smith@example.com'
	}]);

	// 应用额外筛选条件
	const filteredData = computed(() => {
		return data.filter(item => {
			// 姓名筛选
			if (nameFilter.value && !item.name.toLowerCase().includes(nameFilter.value
				.toLowerCase())) {
				return false;
			}

			// 薪资筛选
			if (salaryFilter.value && item.salary <= Number(salaryFilter.value)) {
				return false;
			}

			// 地址筛选
			if (addressFilter.value && !item.address.includes(addressFilter.value)) {
				return false;
			}

			return true;
		});
	});

	// 重置筛选条件
	const resetFilters = () => {
		nameFilter.value = '';
		salaryFilter.value = '';
		addressFilter.value = '';
	};


	const loadData = async () => {
		const res =
			await QuestionControllerService.listQuestionSubmitByPageUsingPost({
				...searchParams.value,
				sortField: "createTime",
				sortOrder: "descend"
			});
		console.log("res",res)
		if (res.code === 0) {
			dataList.value = res.data?.records ?? [];
			total.value = res.data?.total ?? 0;
		} else {
			message.error("加载失败，" + res.message);
		}
	};
	/**
	 * 监听 searchParams 变量，改变时触发页面的重新加载
	 */
	watchEffect(() => {
	  loadData();
	});
	
	/**
	 * 页面加载时，请求数据
	 */
	onMounted(() => {
	  loadData();
	});
	const onPageChange = (page: number) => {
	  searchParams.value = {
	    ...searchParams.value,
	    current: page
	  };
	};
</script>

<style scoped>
	.filter-card {
		background-color: var(--color-bg-2);
	}

	#homePage {
		max-width: 1280px;
		margin: 0 auto;
	}

	.filterIcon {
		text-align: center !important;
		right: 100px !important;
	}
</style>